<template>
    <div class="bouquet">
        <div class="loving">
            <!-- <div class="deadline">|&nbsp;爱情鲜花</div> -->
            <div class="block" v-for="item in bouquetsArray" :key="item.bouquetId">
                <!-- <span class="demonstration">{{ fit }}</span> -->

                <el-image style="width: 300px; height: 300px; display: block" :src="item.bouquetImg"
                    @click="toDetail(item.bouquetId)">
                </el-image>

                {{ item.bouquetName }}
                <p class="price">￥{{ item.bouquetPrice }}</p>
            </div>
        </div>
        <div class="block">

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="this.pageQuery.pageNo" :page-sizes="[6, 12, 18, 24]" :page-size="this.pageQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
import { getBouquet } from '@/api/bouquet'
export default {
    data() {
        return {
            total: 0,
            pageQuery: {
                pageNo: 1,
                pageSize: 12,
            },
            bouquetsArray: [

            ],
        };
    },
    methods: {
        toDetail(bouquetId) {
            this.$router.push({ path: '/bouquetDetails', query: { bouquetId } }).catch(err => err)

        },

        init() {
            getBouquet(this.pageQuery)
                .then(res => {

                    this.bouquetsArray = res.data.records
                    this.total = res.data.total

                })
                .catch(() => {

                })
        },
        handleSizeChange(val) {
            this.pageQuery.pageSize = val
            this.init();

        },
        handleCurrentChange(val) {
            this.pageQuery.pageNo = val
            this.init();
        }
    },

    mounted() {
        this.init();
    }

};
</script>
  
<style lang="scss">
.bouquet {
    .block {
        margin-top: 50px;
        margin-bottom: 50px;

        .el-pagination {
            span {
                margin-left: 200px;
            }


        }
    }

    margin-left: auto;
    margin-right: auto;
    width: 100%;
    // background-color: #f5f5f5;

    .loving {
        width: 80%;
        margin: auto;
        background-color: #f5f5f5;
        display: flex;
        flex-wrap: wrap;

        .deadline {
            padding-top: 10px;

            text-align: left;
            color: #8f633c;
            font-size: 24px;
            width: 80%;
            // border: 1px solid black;
        }

        .block {
            overflow: hidden; //图片超出div部分隐藏
            margin-top: 15px;
            padding: 10px;
            margin-left: 45px;
            background-color: #ffffff;
            display: inline-block;
            // border: 1px solid black;
            // float: left;

            transition: all 0.6s; //设置动画执行的时间为0.6s
            cursor: pointer;


            .price {
                color: red;
                font-size: 24px;
            }
        }

        .block:hover {
            transform: scale(1.05); //设置图片按照比例放大1.3倍
        }

        //  border: 1px solid black;
    }
}
</style>